<template>
  <!-- 友情链接 -->
  <div id="my-link">
    <!-- 面包屑 -->
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>友情链接</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 搜索表单 -->
    <div class="center-query-form">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="queryForm" class="query-form-inline" size="mini">
              <el-form-item label="友链网站名称">
                <el-input v-model="queryForm.name" placeholder="友链网站名称"></el-input>
              </el-form-item>

              <el-form-item label="友链网站地址">
                <el-input v-model="queryForm.address" placeholder="友链网站地址"></el-input>
              </el-form-item>

              <el-form-item label="类型">
                <el-select v-model="queryForm.type" placeholder="类型">
                  <el-option label="主要链接" value="primary"></el-option>
                  <el-option label="成功链接" value="success"></el-option>
                  <el-option label="警告链接" value="warning"></el-option>
                  <el-option label="危险链接" value="danger"></el-option>
                  <el-option label="信息链接" value="info"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
                <el-button type="primary" @click="add()">新增</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 表格 -->
    <div class="center-table">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border size="mini" class="link-table">
              <el-table-column label="编号" align="center" width="80" fixed="left">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="友情链接id" width="80" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="name" label="友链网站名称" width="180" align="center">
              </el-table-column>
              <el-table-column prop="address" label="友链网站地址" width="180" align="center">
              </el-table-column>
              <el-table-column prop="type" label="类型" width="100" align="center">
              </el-table-column>
              <el-table-column prop="sort" label="排序" width="80" align="center" sortable>
              </el-table-column>
              <el-table-column prop="version" label="版本" width="100" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="200" align="center" sortable>
              </el-table-column>
              <el-table-column prop="updateTime" label="修改时间" width="200" align="center" v-if="false">
              </el-table-column>
              <!-- <el-table-column prop="status" label="状态" width="100" align="center" v>
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66"
                        inactive-color="#a6a6a6" @change="handleStatusChange(scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column> -->

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle
                             @click="edit(scope.$index, scope.row)">
                  </el-button>
                  <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.$index, scope.row)">
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 分页插件 -->
    <div class="center-pagination">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pagination.current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pagination.size" :total="pagination.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="35%" class="aboutDialog" size="mini">
      <el-form :inline="false" :model="addForm" ref="addForm" class="add-form">
        <el-form-item label="友链网站名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" placeholder="友链网站名称"></el-input>
        </el-form-item>

        <el-form-item label="友链网站地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" placeholder="友链网站地址"></el-input>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="addForm.type" placeholder="类型">
            <el-option label="主要链接" value="primary"></el-option>
            <el-option label="成功链接" value="success"></el-option>
            <el-option label="警告链接" value="warning"></el-option>
            <el-option label="危险链接" value="danger"></el-option>
            <el-option label="信息链接" value="info"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="addForm.sort" placeholder="排序"></el-input>
        </el-form-item>

        <el-form-item style="text-align: center;">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerAddSubmit()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="updDialogVisible" width="35%" class="aboutDialog" size="mini">
      <el-form :inline="false" :model="updForm" class="upd-form">
        <el-form-item label="友情链接id" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.id" placeholder="友情链接id"></el-input>
        </el-form-item>

        <el-form-item label="友链网站名称" :label-width="formLabelWidth">
          <el-input v-model="updForm.name" placeholder="友链网站名称"></el-input>
        </el-form-item>

        <el-form-item label="友链网站地址" :label-width="formLabelWidth">
          <el-input v-model="updForm.address" placeholder="友链网站地址"></el-input>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="updForm.type" placeholder="类型">
            <el-option label="主要链接" value="primary"></el-option>
            <el-option label="成功链接" value="success"></el-option>
            <el-option label="警告链接" value="warning"></el-option>
            <el-option label="危险链接" value="danger"></el-option>
            <el-option label="信息链接" value="info"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="updForm.sort" placeholder="排序"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.createTime" placeholder="创建时间"></el-input>
        </el-form-item>

        <el-form-item label="修改时间" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.updateTime" placeholder="修改时间"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.status" placeholder="状态"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button @click="updDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerUpdSubmit()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import {
    linkPageList,
    linkSave,
    linkUpdate,
    linkDeletes
} from '@/api/system'
import {
    Message
} from 'element-ui'

export default {
    name: 'my-link',
    data () {
        return {
            queryForm: {
                name: null,
                address: null,
                type: null,
                current: 1,
                size: 10
            },
            addDialogVisible: false,
            tableData: [],
            pagination: {
                current: 1,
                size: 10,
                total: 0
            },
            addForm: {
                name: null,
                address: null,
                type: null
            },
            formLabelWidth: '120px',

            updDialogVisible: false,
            updForm: {
                id: null,
                name: null,
                address: null,
                type: null,
                sort: null,
                version: null,
                createTime: null,
                updateTime: null,
                status: null
            }
        }
    },
    methods: {
    // 查询
        onSubmit () {
            let params = {
                name: this.queryForm.name,
                address: this.queryForm.address,
                type: this.queryForm.type,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            linkPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 新增
        add () {
            this.addDialogVisible = true
        },
        // 新增提交
        handlerAddSubmit () {
            let params = {
                name: this.addForm.name,
                address: this.addForm.address,
                type: this.addForm.type
            }
            linkSave(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.addDialogVisible = false
                    this.addForm.name = null
                    this.addForm.address = null
                    this.addForm.type = null
                    this.onSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 切换每页条数
        handleSizeChange (size) {
            let params = {
                name: this.queryForm.name,
                address: this.queryForm.address,
                type: this.queryForm.type,
                current: this.queryForm.current,
                size: size
            }
            linkPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
            this.queryForm.size = size
        },

        // 切换页码
        handleCurrentChange (current) {
            let params = {
                name: this.queryForm.name,
                address: this.queryForm.address,
                type: this.queryForm.type,
                current: current,
                size: this.queryForm.size
            }
            linkPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })

            this.queryForm.current = current
        },

        handleStatusChange (row) {
            console.log(row)
        },
        // 编辑
        edit (index, row) {
            this.updForm.id = row.id
            this.updForm.name = row.name
            this.updForm.address = row.address
            this.updForm.type = row.type
            this.updForm.sort = row.sort
            this.updForm.version = row.version
            this.updForm.createTime = row.createTime
            this.updForm.updateTime = row.updateTime
            this.updForm.status = row.status
            this.updDialogVisible = true
        },

        // 编辑提交
        handlerUpdSubmit (id) {
            let params = {
                id: this.updForm.id,
                name: this.updForm.name,
                address: this.updForm.address,
                type: this.updForm.type
            }
            linkUpdate(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.updDialogVisible = false
                    this.updForm.id = null
                    this.updForm.name = null
                    this.updForm.address = null
                    this.updForm.type = null
                    this.updForm.version = null
                    this.updForm.createTime = null
                    this.updForm.updateTime = null
                    this.updForm.status = null
                    this.onSubmit()
                }
            })
        },

        // 删除
        del (index, row) {
            console.log(index, row)

            let params = []
            params.push(row.id)

            linkDeletes(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.onSubmit()
                }
            })
        }

    },
    mounted () {
        let params = {
            name: this.queryForm.name,
            address: this.queryForm.address,
            type: this.queryForm.type,
            current: this.queryForm.current,
            size: this.queryForm.size
        }
        linkPageList(params).then((response) => {
            this.tableData = response.data.list
            this.pagination.total = response.data.total
            this.pagination.current = response.data.current
            this.pagination.size = response.data.size
        })
    }
}
</script>

<style scoped>
#my-link {
  width: 100%;
  height: auto;
}

.div-breadcrumb {
  margin: 20px 30px 0px 30px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 搜索表单 */
.center-query-form {
  margin: 0px 30px 0px 30px;
}

/* 表格 */
.center-table {
  margin: 0px 30px 0px 30px;
}

.link-table {
  width: 100%;
}

/* 分页 */
.center-pagination {
  margin: 0px 30px 20px 30px;
  text-align: center;
}

/* dialog */
.aboutDialog {
  height: auto;
  text-align: left;
}

.aboutDialog >>> .el-dialog__body {
  padding: 15px 15px 15px 0px !important;
}

.aboutDialog >>> .el-dialog__header {
  padding: 10px 20px;
  height: 25px;
  line-height: 25px;
  text-align: left;
  background: #3378df;
  border-bottom: solid 1px #3378df;
}

.aboutDialog >>> .el-dialog__title {
  color: #fff;
  font-size: 14px;
}

.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn:hover .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn {
  top: 13px;
}

.aboutDialog >>> .el-dialog__footer {
  padding: 10px 20px;
  border-top: solid 1px #3378df;
}
</style>
